<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-wap-web-app-capable" content="yes">
    <meta name="apple-wap-web-app-status-bar-style" content="black-translucent">
    <meta name="MobileOptimized" content="240"/>
    <title>创建战队</title>
    <link rel="stylesheet" href="$!webPath/css/reset.css" />
    <link rel="stylesheet" href="$!webPath/css/style.css" />
    <link rel="stylesheet" href="$!webPath/css/style_my.css" />
    <script src="$!webPath/js/jquery.min.js"></script>
    <script src="$!webPath/js/city.js"></script>
    <script src="$!webPath/js/jquery.form1.js"></script>
</head>
<body style="background-color:#fff">
<div class="all">
    <form method="post" name="theForm" id="theForm"  enctype="multipart/form-data">
    <div class="teamTop">
        <div class="teamAvatar">
            <div>
                <img id="teamImg" src="$!webPath/imgs/member.jpg" width="100%">
                <input type="file" name="photo" id="fileImg" style="display: none;">
            </div>
        </div>
    </div>
        <div class="create_team_box">
  				<div class="create_team_text">战队名称</div>
  				<input type="text" name="teamName" id="teamname" onblur="checkTeamName()" value="" onkeyup="value=value.replace(/[\d]/g,'')" maxlength="8"/>
        </div>
         <div class="create_team_box">
  				<div class="create_team_text">队长姓名</div>
  				<input type="text" name="leaderName" id="captain" value="" onkeyup="value=value.replace(/[\d]/g,'')" maxlength="10" />
        </div>
         <div class="create_team_box">
  				<div class="create_team_text" >队长手机</div>
  				<input type="text" name="mobile" id="mobile" value="" onkeyup="value=value.replace(/\D/g,'')" onblur="checkPhone()" maxlength="11"/>
        </div>
         <div class="create_team_box" style="position: relative;left:0;top:0;">
  				<div class="create_team_text">所在地</div>
                <select id="province" class="province" style="position: absolute;top:4px;"><option>上海</option></select><select id="city" class="city" style="position: relative;left: 0;top: 4px;"><option>徐汇区</option></select>
        </div>
       <div class="create_team" style="display: none">
       		<div class="create_team_juzhong">
		       	<img  src="$!webPath/imgs/warning.png">
		       	<p>手机号已存在，请重新输入</p>
       		</div>
       </div>
        <input type="hidden" id="location" name="location">
        </form>
    <div class="teamFooter">
        <a href="$!webPath/team/getMyTeam" class="btnB">上一步</a>
        <a href="javascript:void(0)" onclick="complete()" class="btnY">完成</a>
    </div>
</div>
</body>
<script>
   $(function(){
       $('#teamImg').click(function() {
           $('#fileImg').css('display','block');
       })
       $('#fileImg').change(function(){
           var $file = $(this);
           var fileObj = $file[0];
           var windowURL = window.URL || window.webkitURL;
           var dataURL;
           var $img = $("#teamImg");

           if (fileObj && fileObj.files && fileObj.files[0]) {
               dataURL = windowURL.createObjectURL(fileObj.files[0]);
               $img.attr('src', dataURL);
               $('#fileImg').css('display','none');
           } else {
//               dataURL = $file.val();
//               var imgObj = document.getElementById("preview");
               // 两个坑:
               // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
               // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
//               imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
//               imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
               alert('不支持图片格式');
           }
       })
   })
    function checkTeamName(){
        var teamName=$('#teamname').val();
        $.ajax({
            type:'post',
            url:'$!webPath/team/validate_teamName',
            data:{teamName:teamName},
            success: function () {
                return teamName;
            },
            error: function () {
                $('#teamname').attr('placeholder','战队名已经存在');
            }
        })
    }
    function checkPhone(){
        var phone=$('#phone').val();
        $.ajax({
            type:'post',
            url:'$!webPath/team/validate_mobile',
            data:{mobile:phone},
            success:function(){
                $('.create_team').css('display','none');
                return phone;
            },
            error: function () {
                $('.create_team').css('display','block');
            }
        })
    }
    function complete(){
        var teamname = jQuery('#teamname').val();
        var captain = jQuery('#captain').val();
        var phone = jQuery('#mobile').val();
        var location=$('#province option:selected').val()+' '+$('#city option:selected').val();
        if(teamname==''){
            alert('战队名不能为空');
            return false;
        }
        if(captain==''){
            alert('队长名不能为空');
            return false;
        }
        if(phone==''){
            alert('手机号不能为空');
            return false;
        }
        $('#location').val(location);
        $('.btnY').attr('disabled',"true");
        $("#theForm").ajaxSubmit({
            url : "$!webPath/team/saveNewTeam",
            type : "post",
            success : function(data) {
                window.location.href = "$!webPath/team/create_team_complete";
            },
            error : function(data) {
                alert('失败');
            }
        });
        $('.btnY').removeAttr("disabled");
    }
</script>
</html>